<template>
  <div style="min-width: 829px">
    <div v-if="$route.path == '/trademark'">
      <!-- <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
          <el-form-item label="门店名称:">
            <el-input style="width: 200px" v-model="paging.title"></el-input>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="select(1)" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div> -->
      <div class="vs-table-box">
        <!-- <div class="operation-box clear-float">
          <el-button
            icon="el-icon-plus"
            @click="utils.goUrl(`/editClassify?title=新增分类`)"
            style="margin-left: auto"
            type="primary"
          >
            新增
          </el-button>
        </div> -->
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column label="门店名称" prop="store">
            <template slot-scope="scope">
              {{scope.row.store && scope.row.store.title}}
            </template>
          </el-table-column>
          <el-table-column label="品牌名称" prop="brand"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-link v-if="scope.row.status == 0" type="warning">待审核</el-link>
              <el-link v-if="scope.row.status == 1" type="success">通过</el-link>
              <el-link v-if="scope.row.status == 2" type="danger">驳回 <span v-if="scope.row.reason">（{{scope.row.reason}}）</span></el-link>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0">
                <el-button type="primary" size="mini" @click="brandProcess(1,scope.row)">通过</el-button>
                <el-button type="danger" size="mini" @click="brandProcess(2,scope.row)">驳回</el-button>
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      paging: {
        title: "",
        name: "",
        tel: "",
        page: 1,
        limit: 10,
        total: 0, //总数
      },
      tableData: [], // 列表数据
      reason: '', // 驳回原因
    };
  },
  created() {
    this.GetList();
  },
  methods: {
    brandProcess(status,row) {
      if (status === 1) {
        this.$confirm('您确定要通过此门店？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let { code, data } = await this.$Http.brandProcess({
            id: row.id,
            status: status
          });
          if (code) this.$message.success('已通过');
          this.GetList();
        });
      } else {
        this.$prompt('请输入驳回原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^.+$/,
          inputErrorMessage: '不能为空'
        }).then(async ({ value }) => {
          let { code, data } = await this.$Http.brandProcess({
            id: row.id,
            status: status,
            reason: value
          });
          if (code) this.$message.success('已驳回');
          this.GetList();
        })
      }
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.GetList();
    },
    // 查询
    select() {
      if (!this.paging.title && !this.paging.name && !this.paging.tel) {
        this.utils.message("查询条件至少输入一项！");
        return false;
      }
      this.GetList();
    },
    // 获取分类列表
    async GetList() {
      this.loading = true;
      let { code, data } = await this.$Http.brandList(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        this.paging.limit = data.per_page;
        this.paging.total = data.total;
      }
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.GetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
</style>